<template>
  <div class="e-t-box" ref="scrollTableRef">
    <div
      class="item-container"
      :style="{
        '--height': `${dHeight}px`,
      }"
      v-scroll.mouse
    >
      <div class="table-colum" v-for="(item, index) in tableData" :key="index">
        <div :class="`grade`" :style="alertColor(item.alertGrade)">
          {{ alertLv(item.alertGrade) }}
        </div>

        <div class="alert">{{ item.alertContent }}</div>

        <div class="time">{{ item.latestAlertTime }}</div>
        <div class="fin">
          <div class="fin" @click="chooseItem(item)">
            <div class="chuli">
              {{ Number(item.handleStatus) == 0 ? "处理" : "查看" }}
            </div>
            <div class="icon" style="line-height: 100%;">
              <el-icon size="15">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref, watch, onMounted ,shallowRef} from "vue";
import { getAlertMessageDetail } from "@/api/alert";
import { useAlertDetailStore } from "@/stores/alertDeail";
import { useAutoScrollTable } from "@/utils/chart";
// import {
//   addDialog,
//   closeDialog,
//   closeAllDialog,
//   updateDialog,
// } from "@/components/redialog";
import { addDialog } from "@/components/custom-dialog/index";
import { getEqDetails } from "@/api/equipment";
import { getAlertMessageDetails } from "@/api/alert";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import CustomAlertDialog from '@/components/custom-alert-dialog/index.vue';
const { scroll } = useAutoScrollTable();
const scrollTableRef = ref();
const alertDetailStore = useAlertDetailStore();
const props = defineProps({
  data: {
    type: Array,
  },
  height: {
    type: Number,
    default: 200,
  },
  showNoData: {
    type: Boolean,
    default: true,
  }, // 是否显示空数据提示
  isAlert: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const dHeight = computed(() => {
  return props.height * (innerHeight / 1080);
});
const tableData = ref([]);

// Setbtnshow
const alertColor: any = (lv: any) => {
  switch (lv) {
    case "ERROR":
      return "color:rgba(224, 73, 40, 1);background-color:rgba(224, 73, 40, 0.20);border: 1px solid rgba(224, 73, 40, 1);";
    case "WARN":
      return "color:rgba(255, 230, 101, 1);background-color:rgba(255, 230, 101, 0.20);border: 1px solid rgba(255, 230, 101, 1);";
    case "INFO":
      return "color:rgba(107, 228, 255, 1);background: rgba(107, 228, 255, 0.20);border: 1px solid rgba(107, 228, 255, 1);";
  }
};
const alertLv: any = (lv: any) => {
  switch (lv) {
    case "ERROR":
      return "紧急";
    case "WARN":
      return "告警";
    case "INFO":
      return "一般";
  }
};
watch(
  () => props.data,
  (newVal) => {
    tableData.value = newVal;
  },
  {
    immediate: true,
    deep: true,
  }
);

const chooseItem = async (item: any) => {






  addDialog({
            title: "告警详细信息",
            width: "600px",
            draggable: false,
            modal: true,
            closeOnClickModal: true,
            Zindex: 9999,
            props: {
                data: {
                    info: {
                        告警内容: item.alertContent,
                        告警等级: item.alertGrade,
                        告警时间: item.alertTime,
                        设备名称: "有害气体检测仪",
                        设备位置: "一区东北角",
                        告警ID: item.alertID,
                        告警父级: item.parentsKey
                    },
                    imgSrc: requireImgUrl("image", "气体报警"),
                    showSomeDetail: true,
                    bottomBtn: true,
                    WorkerOrder: false,
                },
            },
            component: shallowRef(CustomAlertDialog),
            callBack: (data: any) => {
                //当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）
                console.log("回调函数", data);
            },
        });


  // const testclose = (options, index) => {
  //   return () => closeDialog(options, index);
  // };
  // // 已处理变为查看

  // let id = item.alertMessageId;
  // let queryForm = {
  //   handleStatus: item.handleStatus,
  //   startTime: "",
  //   endTime: "",
  //   detailId: String(item.id),
  //   messageId: String(id),
  //   order: "",
  //   orderType: "",
  //   pageNum: 1,
  //   pageSize: 1,
  // };
  // let res = (await getAlertMessageDetails(queryForm)).data.records[0] as any;
  // // let res = (await getAlertMessageDetail(id)) ;
  // let timeOfDuration =
  //   (new Date().getTime() - new Date(res.alertTime).getTime()) / 1000;
  // console.log(timeOfDuration, "timeOfDuration");
  // console.log(res.imageUrl, "res.imageUrl");

  // let message = await getAlertMessageDetail(id);

  // getEqDetails(message.data.businessId).then((res1) => {
  //   let alertMessage = {
  //     equipmentId: message.data.businessId,
  //     alertMessageId: item.alertMessageId,
  //     alertContent: item.alertContent,
  //     alertGrade: item.alertGrade,
  //     handleStatus: item.handleStatus,
  //     imgFlag: message.data.imgFlag,
  //     equipmentName: message.data.equipmentName,
  //     equipmentType: message.data.equipmentType,
  //     equipmentLocation: res1.data.equipmentLocation,
  //     imageUrl: res.imageUrl,
  //     timeOfDuration: timeOfDuration,
  //     equipmentLocationCode: res1.data.equipmentLocationCode
  //       ? res1.data.equipmentLocationCode
  //       : "",
  //     alertToneUrl: null,
  //     latestAlertTime: message.data.latestAlertTime,
  //     alertType: "detail",
  //     id: item.id,
  //   };

  //   useAlertDetailStore().SetMessage(alertMessage);
  //   addDialog({
  //     contentRenderer: ({ options, index }) => (
  //       <alertDialog closeFn={testclose(options, index)}> </alertDialog>
  //     ),
  //     class: "alertDialog",
  //     headerRenderer: ({ close, titleId, titleClass }) => (
  //       // jsx 语法
  //       <reHeader
  //         headerId={titleId}
  //         headerClass={titleClass}
  //         closeFn={close}
  //         headerTitle={"处理告警"}
  //       >
  //         {" "}
  //       </reHeader>
  //     ),
  //     hideFooter: true,
  //   });
  // });
};

onMounted(() => {
  if (scrollTableRef.value) {
    scroll(scrollTableRef);
  }
});
</script>

<style lang="scss" scoped>
.e-t-box {
  width: 100%;
  padding: clamp(0.625rem, 0.52vw, 1.25rem);
  box-sizing: border-box;

  font-weight: 600;

  .item-container {
    width: 100%;

    height: var(--height);
    overflow-y: auto;

    scrollbar-width: none;
    cursor: pointer;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .table-colum {
      color: white;
      width: 100%;
      height: clamp(2.5rem, 2.08vw, 5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(0.313rem, 0.26vw, 0.625rem);
      box-sizing: border-box;

      .name {
        width: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }

      .alert {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
      }

      .time {
        width: 40%;

        text-align: center;
      }

      .fin {
        width: 15%;

        .fin {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(38, 190, 255, 1);
        }
      }

      .grade {
        font-size: clamp(0.75rem, 0.63vw, 1.5rem);
        padding: clamp(0.375rem, 0.31vw, 0.75rem)
          clamp(0.625rem, 0.52vw, 1.25rem);
      }
    }
  }
}
</style>
